<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue v-model Demo</title>
  <script src="https://unpkg.com/vue@3.4.13/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <div class="container">
      <h1>Vue v-model Demo</h1>

      <!-- v-model modifiers -->
      <section class="section">
        <h2>v-model Modifiers</h2>
        <my-component v-model.capitalize="myText"></my-component>
        <p>Modified Text: {{ myText }}</p>
      </section>
    </div>
  </div>

  <script type="module">
    const { createApp, defineComponent, ref } = Vue;

    const MyComponent = defineComponent({
      name: 'MyComponent',
      props: {
        modelValue: String,
        modelModifiers: { default: () => ({}) }
      },
      emits: ['update:modelValue'],
      setup(props, { emit }) {
        const value = ref(props.modelValue);

        const updateValue = (event) => {
          let newValue = event.target.value;
          if (props.modelModifiers.capitalize) {
            newValue = newValue.charAt(0).toUpperCase() + newValue.slice(1);
          }
          emit('update:modelValue', newValue);
          value.value = newValue;
        };

        return {
          value,
          updateValue
        };
      },
      template: `
        <input
          type="text"
          :value="value"
          @input="updateValue"
          placeholder="Enter text (capitalize first letter)"
        >
      `
    });

    createApp({
      components: {
        MyComponent
      },
      data() {
        return {
          myText: ''
        };
      }
    }).mount('#app');
  </script>
</body>
</html>